<template>
  <div class="tree">
    <TreeNode v-for="(TreeNood, index) in noodData"
      :key="index"
      :noodData="TreeNood"
      :loading="isLoading"
      :checked="showChecked"
      :render="render">
    </TreeNode>
  </div>
</template>

<script type="text/ecmascript-6">
/**
 * 设计思路：1.采用多个根节点分别渲染去处理，
 *          2.底层渲染采用vue-render函数处理
 *          3.优化数据结构
 * 必要参数：1.机构树高度
 *          2.机构树数组
 * 实现功能：1.可内嵌ie滚动条
 *          2.优化首屏响应速度
 *          3.可为树结构添加按钮并相应事件
 */
import TreeNode from './TreeNode'
export default {
  name: 'Tree',
  props: {
    noodData: { // 树结构数据
      type: Array,
      default: function () {
        return []
      },
      required: true
    },
    isLoading: { // 是否异步加载
      type: Boolean,
      default: false
    },
    showChecked: { // 是否选中
      type: Boolean,
      default: false
    },
    expand: { // 是否展开
      type: Boolean,
      default: false
    },
    render: { // 自定义渲染函数
      type: Function
    }
  },
  components: {
    TreeNode
  }
}
</script>

<style scoped>
.tree{
  width: 400px;
  background: #000;
}
</style>
